<template>
  <view class="">
    <view class="sub-content">
      <view class="title">
        线图
      </view>
      <chart chartType="line" :opts="lineOption" canvasId="u-line-canvas"></chart>
    </view>
    <view class="sub-content">
      <view class="title">
        饼图
      </view>
      <chart chartType="pie" :opts="pieOption" canvasId="u-pie-canvas"></chart>
    </view>
    <view class="sub-content">
      <view class="title">
        圆环图
      </view>
      <chart chartType="ring" :opts="ringOption" canvasId="u-ring-canvas"></chart>
    </view>
    <view>
      
    </view>
    
    <view class="sub-content">
      <view class="title">
        省市区级联框
      </view>
      <view class="">
        <picker :value="multiDistrictIndex" range-key="name" :range="multiDistrictArray" @cancel="bindDistrictPickerCancel" @change="bindDistrictPickerChange" @columnchange="bindDistrictColumnPickerChange" class="form-item-pick" mode="multiSelector">
          <view class="pick-value" v-if="multiDistrictIndex && multiDistrictIndex.length > 0">
            <text v-if="multiDistrictArray[0] && multiDistrictArray[0][multiDistrictIndex[0]]">{{multiDistrictArray[0][multiDistrictIndex[0]].name}}</text>
            <text v-if="multiDistrictArray[1] && multiDistrictArray[1][multiDistrictIndex[1]]">{{multiDistrictArray[1][multiDistrictIndex[1]].name}}</text>
            <text v-if="multiDistrictArray[2] && multiDistrictArray[2][multiDistrictIndex[2]]">{{multiDistrictArray[2][multiDistrictIndex[2]].name}}</text>
          </view>
          
          <view class="pick-value" v-else>请选择您的所在城市</view>
        </picker>
      </view>
    </view>
    
    <view class="sub-content">
      <view class="title">
        上传图片
      </view>
      <view class="" v-if="img && img.url">
        <image :src="img.url" mode=""></image>
      </view>
      <view class="">
        <button type="primary" @click="uploadImg">上传图片</button>
      </view>
    </view>
    
    <view class="">
      <view class="title">
        生成二维码图片
      </view>
      <tki-qrcode ref="qrcode" :val="val" :size="size" :loadMake="loadMake" @result="qrR"/>
    </view>
    
    <view class="">
      <view class="title">
        地图
      </view>
      <view class="">
        <cover-view>
          <div id="container"></div>
          <input type="text" value="" v-model="inputVal"/>
          <button type="primary" @click="search">搜索</button>
        </cover-view>
      </view>
    </view>
  </view>
</template>

<script>
import { isInWXWebview, uploadFile, multiDistrict } from '../../unit/common.js'
import chart from '../../components/u-charts/component.vue'
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'

let _self;
let canvaRing = null;
let auto;
export default {
  data () {
    return {
      inputVal: '',
      val: 'http://testmartweb.tofire.cn/pages/purchaseShop/goodsDetail',
      size: 200,
      loadMake: false,
      onval: true,
      // 省市区相关
      multiDistrictIndex: [], // 省市区选择的index
      multiDistrictArray: [], // 省市区数据 Array[Object]
      multiDistrictIds: [], // 省市区ID
      originMultiDistrictIndex: [], // 原始数据 用于取消选择省市区，还原原始数据
      originMultiDistrictArray: [], // 原始数据 用于取消选择省市区，还原原始数据
      originMultiDistrictIds: [], // 原始数据 用于取消选择省市区，还原原始数据
      //
      // 上传图片相关
      img: {
        id: null,
        url: null
      },
      //charts相关
      lineOption: {
        categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
        series: [{
          name: '成交量A',
          data: [35, 20, 25, 37, 4, 20],
          color: '#000000'
        }, {
          name: '成交量B',
          data: [70, 40, 65, 100, 44, 68]
        }, {
          name: '成交量C',
          data: [100, 80, 95, 150, 112, 132]
        }]
      },
      pieOption: {
        series: [{
          "name": "一班",
          "data": 50
        }, {
          "name": "二班",
          "data": 30
        }, {
          "name": "三班",
          "data": 20
        }, {
          "name": "四班",
          "data": 18
        }, {
          "name": "五班",
          "data": 8
        }]
      },
      ringOption: {
        "series": [{
          "name": "一班",
          "data": 50
        }, {
          "name": "二班",
          "data": 30
        }, {
          "name": "三班",
          "data": 20
        }, {
          "name": "四班",
          "data": 18
        }, {
          "name": "五班",
          "data": 8
        }]
      }
    }
  },
  components: {
    chart, tkiQrcode
  },
  onReady () {
    
  },
  mounted() {
    _self = this;
    //#ifdef MP-ALIPAY
    uni.getSystemInfo({
      success: function (res) {
        if(res.pixelRatio>1){
          //正常这里给2就行，如果pixelRatio=3性能会降低一点
          //_self.pixelRatio =res.pixelRatio;
          _self.pixelRatio =2;
        }
      }
    });
    //#endif
    // this.initDistrictData([1, 2, 5]); // 编辑 初始化省市区
    let that = this;
    setTimeout(function () {
      that.initDistrictData(); // 新增 初始化省市区
    }, 3000);
    setTimeout(function () {
      that.creatQrcode();
    }, 5000)
    
  },
  methods: {
    qrR (path) {
      console.log(path);
    },
    creatQrcode() {
      this.$refs.qrcode._makeCode()
    },
    async initDistrictData (district) { // 初始化省市区数据
      let {multiDistrictArray, multiDistrictIndex, multiDistrictIds} = await multiDistrict.initMultDistrictArray({
        district: district
      });
      this.multiDistrictArray = multiDistrictArray;
      this.multiDistrictIndex = multiDistrictIndex;
      this.multiDistrictIds = multiDistrictIds;
      this.originMultiDistrictArray = JSON.parse(JSON.stringify(multiDistrictArray));
      this.originMultiDistrictIndex = JSON.parse(JSON.stringify(multiDistrictIndex));
      this.originMultiDistrictIds = JSON.parse(JSON.stringify(multiDistrictIds));
    },
    bindDistrictPickerCancel (e) { // 取消省市区的选择
      this.multiDistrictArray = JSON.parse(JSON.stringify(this.originMultiDistrictArray));
      this.multiDistrictIndex = JSON.parse(JSON.stringify(this.originMultiDistrictIndex));
      this.multiDistrictIds = JSON.parse(JSON.stringify(this.originMultiDistrictIds));
    },
    bindDistrictPickerChange (e) { // 确认省市区的选择
      this.originMultiDistrictArray = JSON.parse(JSON.stringify(this.multiDistrictArray));      
      this.originMultiDistrictIndex = JSON.parse(JSON.stringify(this.multiDistrictIndex));
      this.originMultiDistrictIds = JSON.parse(JSON.stringify(this.multiDistrictIds));
    },
    async bindDistrictColumnPickerChange (e) { // 省市区的列发生变化
      if (e.detail.column < this.multiDistrictArray.length - 1) {
        let {multiDistrictArray, multiDistrictIndex, multiDistrictIds} = await multiDistrict.bindDistrictColumnPickerChange({
          column: e.detail.column,
          index: e.detail.value,
          multiDistrictIndex: JSON.parse(JSON.stringify(this.multiDistrictIndex)),
          multiDistrictArray: JSON.parse(JSON.stringify(this.multiDistrictArray))
        });
        this.multiDistrictArray = multiDistrictArray;
        this.multiDistrictIndex = multiDistrictIndex;
        this.multiDistrictIds = multiDistrictIds;
      } else {
        this.multiDistrictIndex.splice(e.detail.column, 1, e.detail.value);
        this.multiDistrictIds.splice(e.detail.column, 1, this.multiDistrictArray[e.detail.column][e.detail.value].id);
      }
    },
    uploadImg () { // 上传图片
      uploadFile({
        success: (res) => {
          this.img = res.data;
        }
      });
    },
    search() {
      auto.search(this.inputVal, function (e, result) {
        console.log(result);
      })
    },
  },
  onShow() {
    let that = this;
    if (isInWXWebview()) { // 微信公众号分享
      this.$wx.ready(function() {
        //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）  
        that.$wx.updateAppMessageShareData({  
          title: '标题', // 分享标题  
          desc: "描述内容", // 分享描述  
          link: "链接", // 分享链接  
          imgUrl: 'https://img-cdn-qiniu.dcloud.net.cn/static/images/logo1@2x.png', // 分享图标                                
          success: function() {  
            // 用户确认分享后执行的回调函数  
            console.log('success');
          },  
          cancel: function() {  
            // 用户取消分享后执行的回调函数  
          }  
        });  
        //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）  
        that.$wx.updateTimelineShareData({  
          title: '标题', // 分享标题                                  
          link: '链接', // 分享链接  
          imgUrl: '显示图片', // 分享图标                                
          success: function() {  
            // 用户确认分享后执行的回调函数  
          },  
          cancel: function() {  
            // 用户取消分享后执行的回调函数  
          }  
        });  
      
      });
    }
  },
  
  onShareAppMessage(res) { // 微信小程序分享
    return {
      title: '微信小程序测试分享ceshi',
      path: '/pages/common/login',
      imageUrl: 'https://img-cdn-qiniu.dcloud.net.cn/static/images/logo1@2x.png'
    }
  },
  onLoad () {
    window.onLoad  = function() {
      var map = new AMap.Map('container');
      AMap.plugin('AMap.Autocomplete',function(){//异步加载插件
        auto = new AMap.Autocomplete();
        // auto.search('上海市徐汇区', function (e, result) {
        //   console.log(result);
        // })
      });
      
    }
    var url = 'https://webapi.amap.com/maps?v=1.4.15&key=42f98d79c8315210186ad2e405eef0ea&callback=onLoad';
    var jsapi = document.createElement('script');
    jsapi.charset = 'utf-8';
    jsapi.src = url;
    document.head.appendChild(jsapi);
  }
}
</script>

<style lang="scss" scoped>
  .sub-content {
    margin: 40rpx 0;
    background-color: #8F8F94;
    &:first-child {
      margin: 0;
    }
  }
  .title {
    background-color: #09BB07;
    color: #FFFFFF;
    font-size: 40rpx;
    padding: 20rpx 20rpx;
  }
  #container {
    width: 100%;
    height: 500px;
  }
</style>
